<template>
  <!-- #ifdef H5 -->
    <mtitles  title="我的优惠劵" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="container">
		<view class="aprTitBox flex">
			<view v-for="(item, index) in navList" :key="index" :class="{ active: item.id === navCode }" class="titItem"
				@click="tapNav(item.id)">{{ item.name }}</view>
		</view>
		<view class="subTitBox padding-left-xs padding-top-sm flex text-c6 padding-bottom-xs">
			<view v-for="(item, index) in subList" :key="index" @click="tapSub(item.id)" :class="{ act: item.id === subCode }"
				class="subtItem d_ib padding-lr">
				{{ item.name }}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scrBox">
			<view class="padding-lr padding-top-sm">
				<view v-for="(item, index) in 6" :key="index" class="clistItem flex p_rlt margin-bottom-sm"	:class="{ gry: subCode == '1' || subCode == '3' }">
					<view class="cleft text-nred leftDashed flex flex-direction justify-center text-center">
						<view class="">
							<text class="text-bold clnum">8.5</text>
							<text class="">折</text>
						</view>
						<view class="text-sm">满100可用</view>
					</view>
					<view class="cright flex-sub p_rlt padding-left padding-bottom-sm">
						<view class="text-bold padding-top">会员日VIP专属券</view>
						<view class="crcenter flex align-center padding-right">
							<view class="flex-sub text-sm text-c9">2022.10.19</view>
							<view class="cactBtn text-ngreen text-center">使用</view>
						</view>
						<view class="cguize text-c6 p_rlt text-sm" :class="{ show: showDetail }">
							<view class="flex-sub">限会员日当天门店使用，使用范围： 颐而康精选商城、小颐有约 限会员日当天门店使用，使用范围： 颐而康精选商城、小颐有约</view>

							<!-- cuIcon-fold -->
							<view class="cgmore text-c3 text-center text-sm" @click.stop="tapShowMore()">
								<view class="">
									更多
									<!-- <text class="cuIcon-unfold text-ngreen" :class="[showDetail?'cuIcon-fold':'cuIcon-unfold']"></text> -->
								</view>
								<view class="text-ngreen"><text :class="[showDetail ? 'cuIcon-fold' : 'cuIcon-unfold']"></text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';

	const navCode = ref('0')
	const navList = ref([
		{
			id: '0',
			name: '全部'
		},
		{
			id: '1',
			name: '全免券'
		},
		{
			id: '2',
			name: '项目券'
		},
		{
			id: '3',
			name: '商城券'
		}
	])
	const subCode = ref('0')
	const subList = ref([
		{
			id: '0',
			name: '未使用'
		},
		{
			id: '1',
			name: '已使用'
		},
		{
			id: '2',
			name: '即将过期'
		},
		{
			id: '3',
			name: '已过期'
		}
	])
	const showDetail = ref(false)

	const tapNav = (id : any) => {
		navCode.value = id;
	}
	const tapSub = (id) => {
		subCode.value = id;
	}
	const tapShowMore = () => {
		showDetail.value = !showDetail.value
	}
</script>

<style lang="scss">
	.aprTitBox {
		height: 80rpx;
		line-height: 81rpx;
		text-align: center;
		// position: fixed;
		// left: 0;
		// top: 0;
		padding-bottom: 3rpx;
		width: 100vw;
		background: #fafafa;
		z-index: 9;

		// &.shaw {
		// 	box-shadow: 0px 4rpx 18rpx rgba(0, 0, 0, 0.08);
		// }
		.titItem {
			width: 154rpx;
			height: 100%;
			position: relative;
			transition: all 0.03s linear;

			&.active {
				font-size: 36rpx;
				font-weight: bold;

				// color: #56bf7a;
				&::before {
					content: '';
					width: 44rpx;
					height: 6rpx;
					position: absolute;
					left: 50%;
					bottom: 2rpx;
					border-radius: 6rpx;
					margin-left: -22rpx;
					background: #56bf7a;
				}
			}
		}
	}

	.subtItem {
		height: 60rpx;
		line-height: 61rpx;

		&.act {
			background: #e4f8e4;
			border-radius: 60rpx;
			color: #56bf7a;
		}
	}

	.scrBox {
		width: 100%;
		height: calc(100vh - 170rpx);
		padding-bottom: 20rpx;
	}

	.clistItem {
		width: 100%;
		min-height: 234rpx;
		background: #fff;
		// box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.1);
		box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		overflow: hidden;
		// &:nth-last-child(1){
		// 	margin-bottom: 0;
		// }

		.cleft {
			width: 212rpx;
			// height: 100%;
		}

		.clnum {
			font-size: 60rpx;
		}

		.crcenter {
			width: 100%;
			height: 68rpx;
		}

		.cactBtn {
			width: 142rpx;
			height: 68rpx;
			line-height: 69rpx;
			background: #e4f8e4;
			border-radius: 68rpx;
		}

		&.gry {
			.cactBtn {
				background: #d0cfcf;
				color: #fff !important;
			}
		}
	}

	.cguize {
		display: flex !important;
		margin-top: 16rpx;
		height: 62rpx;
		// padding-right: 62rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

		&.show {
			height: auto;
			overflow: initial;
			text-overflow: initial;
			display: block;
			-webkit-box-orient: initial;
			-webkit-line-clamp: initial;
		}
	}

	.cgmore {
		width: 60rpx;
		height: 100%; //62
		// position: absolute;
		// right: 0;
		// bottom: 0;
		// z-index: 3;
		cursor: pointer;
	}

	.cright {
		min-height: 100%;

		&:before,
		&:after {
			content: '';
			position: absolute;
			left: -10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #e4e4e4;
		}

		&:before {
			top: -10rpx;
		}

		&:after {
			bottom: -10rpx;
		}
	}

	.leftDashed {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 1px;
			height: 100%;
			background-image: linear-gradient(to bottom, #e4e4e4 0%, #e4e4e4 52%, transparent 50%);
			background-size: 1rpx 16rpx;
			background-repeat: repeat-y;
		}
	}
</style>